<template>
    <div id="content" v-on:click="clear_dropdown()" >
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <button v-on:click="do_edit()" class="btn btn-primary" data-original-title="保存">
                        <i class="fa fa-save"></i>
                    </button>
                    <button type="button" id="save-variant" title="" class="btn btn-success" >
                        <i class="fa fa-save"></i>
                    </button>
                    <a href="#" title="" class="btn btn-default" >
                        <i class="fa fa-reply"></i>
                    </a>
                </div>
                <h1>商品管理</h1>
                <ul class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">商品管理</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-pencil"></i> 编辑商品</h3>
                </div>

                <div class="panel-body">
                    <div class="form-horizontal">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#tab-general" data-toggle="tab">基本信息</a></li>
                        <li class="">
                            <a href="#tab-data" data-toggle="tab"  >数据</a></li>
                        <li class="">
                            <a href="#tab-image" data-toggle="tab"  >图片</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="tab-pane active" id="tab-general">
                            <div class="form-group required">
                                <label class="col-md-2 control-label" for="input-name2">商品名称</label>
                                <div class="col-md-10">
                                    <input type="text" v-model="info.name" value=""
                                           placeholder="商品名称" id="input-name2" class="form-control">
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="col-md-2 control-label" for="input-category"><span data-toggle="tooltip" title="" data-original-title="自动完成">商品分类</span></label>
                                <div class="col-md-6">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-search" aria-hidden="true"></i></div>
                                        <input type="text" name="category"
                                               v-model="category_filter"
                                               v-on:keyup="search_category()"
                                               placeholder="商品分类" id="input-category" class="form-control" autocomplete="off">
                                        <ul class="dropdown-menu"
                                            style="top: 36px; left: 40px; "
                                            v-bind:style="{display:category_list_show ? 'block':'none'}"
                                        >
                                            <li v-for="item in category_list">
                                                <a v-on:click="check_category( item )" >{{item.cat_name}}</a>
                                            </li>
                                            <!--
                                            <li data-value="59">
                                                <a href="#">760T套装系列</a>
                                            </li>
                                            -->
                                        </ul>
                                    </div>
                                    <div id="product-category" class="well well-sm" style="min-height: 150px; overflow: auto;">

                                        <div v-for="item in selected_category" >
                                            <i v-on:click="delete_selected_category( item )" class="fa fa-minus-circle"></i>{{item.cat_name}}
                                            <!--<input type="hidden" name="product_category[]" value="59">-->
                                        </div>

                                        <!--
                                        <div id="product-category59">
                                            <i class="fa fa-minus-circle"></i>760T套装系列
                                            <input type="hidden" name="product_category[]" value="59">
                                        </div>
                                        <div id="product-category60">
                                            <i class="fa fa-minus-circle"></i> 660系列
                                            <input type="hidden" name="product_category[]" value="60">
                                        </div>
                                        -->
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="input-status">状态</label>
                                <div class="col-sm-10">
                                    <select v-model="info.status" id="input-status" class="form-control">
                                        <option value="0">禁用</option>
                                        <option value="1" >启用</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label" for="input-name2">描述</label>
                                <div class="col-md-10">

                                    <textarea v-model="info.description" id="product_description" cols="30" rows="10"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane " id="tab-data" >
                            <div class="form-group" >
                                <label class="col-md-2 control-label"
                                       for="input-price">销售价格</label>
                                <div class="col-md-6">
                                    <div class="input-group">
                                        <div class="input-group-addon">￥</div>
                                        <input v-model='info.price' type="text" name="price"  placeholder="销售价格" id="input-price" class="form-control">
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="tab-pane" id="tab-image">
                            <div class="table-responsive">
                                <table class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td class="text-left">主图</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="text-left">
                                            <a v-on:click="editImage(image)" id="thumb-image"
                                               data-toggle="image" class="img-thumbnail">
                                                <img style="width:100px" v-bind:src="config.web_url + image.url" alt="" title="" />
                                            </a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-responsive">
                                <table id="images" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <td class="text-left">附加图</td>
                                        <td class="text-right">排序</td>
                                        <td></td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="item in goods_images" >
                                        <td class="text-left">
                                            <a  id="thumb-image0" data-toggle="image" class="img-thumbnail product-img">
                                                <img style='width:100px' v-bind:src="config.web_url + item.url" >
                                            </a>
                                            <input type="hidden"  >
                                        </td>
                                        <td class="text-right">
                                            <input type="text" v-model="item.sort_order" placeholder="排序" class="form-control">
                                        </td>
                                        <td class="text-left">
                                            <button type="button" class="btn btn-danger" title="删除"
                                                v-on:click="removeImage( item )" >
                                                <i class="fa fa-minus-circle"></i>
                                            </button>
                                            <button type="button" class="btn btn-primary" title="编辑"
                                                    v-on:click="editImage( item )" >
                                                <i class="fa fa-pencil"></i>
                                            </button>
                                        </td>
                                    </tr>

                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="2"></td>
                                        <td class="text-left">
                                            <button type="button" v-on:click="addImage()"
                                                    data-toggle="tooltip" title="" class="btn btn-primary" data-original-title="添加图片" >
                                                <i class="fa fa-plus-circle"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "product_edit",
        data:function(){

          return {

              goods_id:0,
              info:{
                  name:'',
                  description:'',
                  image:'',
                  status:1

              },
              image:{
                  url:''
              },
              goods_images:[],
              category_filter:'',
              category_list:[],     // 搜索到的 分类列表
              category_list_show:0,
              selected_category:[], // 选中的分类列表
          }
        },

        methods:{

            clear_dropdown:function(){

                this.category_list_show = 0;

            },

            get_product_info:function(){

                var t = this;
                // var url = this.config.web_url + '/admin.php?r=goods/info';
                var url = this.config.web_url + '&r=goods.info';
                url += '&goods_id=' + this.goods_id;



                this.axios.get( url ).then(function( res ){

                    if( !res.data.status ){

                        t.info = res.data.product;
                        t.image.url = t.info.image;
                        if( t.info.goods_images ){
                            t.goods_images = t.info.goods_images;
                        }

                        t.selected_category = t.info.category;


                    }else{

                        alert( res.data.description );
                    }

                });

            },

            do_edit:function(){

                var t = this;
                // var url = this.config.web_url + '/admin.php?r=goods/edit';
                var url = this.config.web_url + '&r=goods.edit';
                url += '&goods_id=' + this.goods_id;

                var data = this.info;

                data.description = $('#product_description_ifr').contents().find('body').html();

                this.info.image = this.image.url;

                data.goods_images = JSON.stringify( this.goods_images );
                var data_str = '';
                for( var p in data ){
                    data_str +=  p + '=' + data[p] + '&';
                }

                for( var i = 0; i < t.selected_category.length; i ++ ){

                    data_str += 'category[]=' + t.selected_category[i].id + '&';

                }

                this.axios.post( url, data_str ).then(function( res ){

                    if( !res.data.status ){

                        t.$router.push('/catalog/product');

                    }else{

                        alert( res.data.description );
                    }

                });

            },

            editor_init:function () {
                tinymce.init({
                    selector: 'textarea',
                    plugins: "code",
                    language:'zh_CN',

                    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | code',
                    menubar: "tools",
                    removeformat : [
                        {selector : 'span', attributes : ['style', 'class'], split : true, expand : false, deep : true}
                    ]
                });
            }

            ,addImage:function(){

                var new_image = {
                    url:'',
                    sort_order:0
                };
                console.log( this );
                this.goods_images.push(new_image);

            },

            editImage:function( image_obj ){

                this.ckfinder_open( image_obj );

            },

            removeImage:function( item ){

                var index = this.goods_images.indexOf( item );

                console.log( index );
                console.log( this.goods_images );

                this.goods_images.splice( index, 1 );

            },

            search_category:function(){

                var t = this;
                // var url = this.config.web_url + '/admin.php?r=category/search';
                var url = this.config.web_url + '&r=category.search';
                url += '&filter=' + this.category_filter;
                this.category_list_show = 0;
                this.axios.get( url ).then(function( res ){

                    t.category_list = res.data;
                    t.category_list_show = 1;



                });

            },


            check_category:function( item ){



                this.selected_category.push( item );

            },

            delete_selected_category:function( category ){

                var index = this.selected_category.indexOf( category );
                this.selected_category.splice( index, 1 );


            },

            ckfinder_open:function( image_obj ){


                var t = this;
                CKFinder.modal( {
                    width: 600,
                    height: 400,
                    chooseFiles: true,
                    onInit: function( finder ) {
                        finder.on( 'files:choose', function( evt ) {
                            console.log('files:choose');
                            var file = evt.data.files.first();
                            console.log(file.getUrl());
                            var url =  file.getUrl();
                            image_obj.url = url;
                            // console.log( image_obj );
                            // t.setImage(image_obj, url  );
                        } );
                        // finder.on( 'file:choose:resizedImage', function( evt ) {
                        //     console.log('files:choose:resizedImage');
                        //     document.getElementById( 'url' ).value = evt.data.resizedUrl;
                        // } );
                    }
                } );
            },

            test:function(){



                var t = this;


                var url = this.config.web_url + '&r=tool.test';
                console.log( url );
                this.axios.get( url ).then(function( res ){

                    $('body').append( res.data );

                });

            }

        },

        created:function(){

            var t = this;

            var params = this.$route.params;

            if( params.goods_id != undefined ) {
                this.goods_id = params.goods_id;
                this.get_product_info();
            }

            t.test();


            setTimeout(function(){
                t.editor_init();
            },1000);


            // this.ckfinder_open();
        }

    }
</script>

<style scoped>

</style>